<template>
  <div class="main">
    <h3>Basic concept in Vue</h3>
    <p>Basic Data Binding with double curly braces : {{ firstData }}</p>
    <p v-once>This text won't change as 'v-once' is used :{{ firstData }}</p>
    <button @click="changeText">Change Text</button>
    <hr />
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <hr />
    <h5>watch and computed</h5>
    <h5>
      computed能实现的，watch都能实现，但是watch能实现异步操作，computed不行！
    </h5>
    FirstName: <input type="text" v-model="firstName" /> LastName:
    <input type="text" v-model="lastName" /> Fullname:
    <span>{{ fullName }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstData: "I'm data!",
      rawHtml: "<p>Raw HTML:不安全！</p>",
      firstName: "",
      lastName: "",
      fullName: "",
    };
  },
  methods: {
    changeText() {
      this.firstData === "I'm data!"
        ? (this.firstData = "text changed!")
        : (this.firstData = "I'm data!");
    },
  },
  watch: {
    firstName(newValue) {
      setTimeout(() => {
        this.fullName = newValue + " " + this.lastName;
      }, 1700);
    },
    lastName(newValue) {
      this.fullName = this.firstName + " " + newValue;
    },
  },
};
</script>

<style scoped>
.main {
  background-color: rgb(255, 245, 205);
}
</style>
